<template>
  <div class="goodsinfo-container">

    <!-- 实现小球 -->
    <!-- 钩子函数，都是通过实践绑定机制，绑定到 transitino 元素上的 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show='flag'></div>
    </transition>
      
    <!-- 轮播图区域 -->
    <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
          <swiper :lunbotu="lunbotu" :imgname="'src'" ></swiper>
				</div>
			</div>
		</div>

    <!-- 商品购买区域 -->
    <div class="mui-card">
			<div class="mui-card-header">{{ goodsinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
          <p class="price">
            市场价：
            <del style='margin-right:10px'>￥{{ goodsinfo.market_price }}</del>
            销售价：
            <span style="font-size:16px;color:red;font-weight:bold;">￥{{ goodsinfo.sell_price }}</span>
          </p>
          <p>
            <!-- 注意：这里的max是库存量 -->
            购买数量：<nobox :max='goodsinfo.stock_quantity' @func='getChange'></nobox>
          </p>
          <div>
            <mt-button type='primary' size='small'>立即购买</mt-button>
            <mt-button type='danger' size='small' @click='addToCart'>加入购物车</mt-button>
          </div>
				</div>
			</div>
		</div>
    
    <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
          <p>商品货号：{{ goodsinfo.goods_no }}</p>
          <p>库存情况：{{ goodsinfo.stock_quantity }} 件</p>
          <p>上架时间：{{ goodsinfo.add_time | dataFormat }}</p>
				</div>
			</div>
		  <div class="mui-card-footer btnarea">

        <!-- <router-link :to='"/home/goodsdesc/" + goodsinfo.id'>
          <mt-button type='primary' size='large' plain>图文介绍</mt-button>
        </router-link> -->


        <!-- 使用编程式导航，来实现路由页面的跳转 -->
        <!-- 编程式导航：就是使用JS的代码的方式，来实现路由的跳转 -->
        <!-- 元素导航：使用 router-link 元素实现的导航 -->
        <mt-button type='primary' size='large' plain @click="goDesc">图文介绍</mt-button>
        <mt-button type='danger' size='large' plain>商品评价</mt-button>
      </div>
		</div>
    <br>
    <br>
  </div>

</template>

<script>
// 导入轮播图组件
import swiper from '../sub-conponents/Swiper.vue'
import nobox from '../sub-conponents/goodsinfo_nobox.vue'
import { mapMutations } from "vuex";

export default {
  data(){
    return {
      lunbotu:[], //商品轮播图数组
      goodsinfo:{}, // 商品信息
      flag: false, // 小球的显示与隐藏的状态
      selectedCount: 1 // 用户选择的数量，默认为 1
    }
  },
  created(){
    this.getlunbotu()
    this.getGoodsInfoById()
  },
  methods:{
    ...mapMutations(['addToCar']),
    async getlunbotu(){
      // 获取轮播图的方法
      const { data } = await this.$http.get("/api/getthumimages/" + this.id)
      if(data.status === 0) return (this.lunbotu = data.message)
    },
    async getGoodsInfoById(){
      // 根据ID获取商品的参数
      const { data } = await this.$http.get("/api/goods/getinfo/" + this.id)
      if(data.status === 0) return (this.goodsinfo = data.message[0])
    },
    goDesc(){
      // 点击按钮跳转页面
      // 注意：在 this 这个组件身上，有 this.$route 和 this.$router
      // this.$route 是专门用来获取路由中参数的
      // this.$router 是专门用来实现编程式导航的
      console.log(this);
      this.$router.push("/home/goodsdesc/" + this.goodsinfo.id)
    },
    addToCart(){
      // 点击加入购物车
      // 小球的显示与隐藏
      this.flag = !this.flag

      // 调用 mutations 中的 addToCar
      // this.$store.commit("addToCar",{id: this.id, count: this.selectedCount})
      this.addToCar({
        id: this.id, 
        count: this.selectedCount, 
        selected: true, 
        price:this.goodsinfo.sell_price})
    },
    beforeEnter(el){
      // 入场动画开始之前，设置球的起始位置
      el.style.transform = 'translate(0,0)'
    },
    enter(el,done){
      el.offsetWidth
      // 入场动画结束之后，小球的终止状态

      // 动态获取小球的横纵坐标
      const ballPos = el.getBoundingClientRect()
      // 动态获取徽标的横纵坐标
      const badgePos = document.querySelector('.mui-badge').getBoundingClientRect()
      const left = badgePos.left - ballPos.left
      const top = badgePos.top - ballPos.top
      console.log(badgePos);

      el.style.transform = 'translate('+ left +'px,'+ top +'px)'
      // 过渡效果
      el.style.transition = 'all .3s cubic-bezier(.46,-0.68,1,.27) '

      // 当入场动画完成之后，需要手动调用一下 done 回调函数
      done()
    },
    afterEnter(el){
      // 入场动画完成之后的回调函数
      this.flag = !this.flag
    },
    getChange(c){
      this.selectedCount = c
    }
  },
  props:['id'],
  components:{
    swiper, //注册轮播图组件
    nobox
  }
}
</script>

<style lang="scss" scoped>
  .goodsinfo-container{
    background-color: #eee;
    overflow: hidden;
  }

  .btnarea {
    flex-direction: column;
    button + button {
      margin-top: 10px;
    }
  }
  // 小球的样式
  .ball {
    position: absolute;
    top: 370px;
    left: 148px;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    z-index: 99;
  }
  // 小球动画
</style>